<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function requestData(count) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(count)
        }, 2000)
      })
    }

    // 1.发送一次网络请求
    requestData("http://why").then(res => {
      console.log("res", res)
    })

    /*
      需求
        1. 发送一次网络请求,等待这次网络请求的结果
        2. 发送第二次网络请求,等待第二次网络请求的结果
        3. 发送第三次网络请求,等待第三次网络请求的结果
    */

    // 方式一: 层层嵌套(回调地狱 callback hell)
    function getData() {
      // 1. 第一次请求
      requestData("why").then(res1 => {
        console.log('第一次结果:', res1)
        // 2. 第二次请求
        requestData(res1 + 'kobe').then(res2 => {
          console.log('第二次结果:', res2)
          // 3. 第三次请求
          requestData(res2 + 'james').then(res3 => {
            console.log('第三次结果:', res3)
          })
        })
      })
    }

    getData()


    // 方式二: 使用Promise进行重构
    function getData1() {
      requestData('why1').then(res1 => {
        console.log("第一次结果:", res1)
        return requestData(res1 + 'kobe1')
      }).then(res2 => {
        console.log("第二次结果:", res2)
        return requestData(res2 + 'james1')
      }).then(res3 => {
        console.log("第三次结果:", res3)
      })
    }

    getData1()

    // 方式三:最终代码
    function* getData2() {
      const res1 = yield requestData('why2')
      console.log("第一次结果:", res1)
      const res2 = yield requestData(res1 + 'kobe2')
      console.log("第二次结果:", res2)
      const res3 = yield requestData(res2 + 'james2')
      console.log("第三次结果:", res3)
    }

    const generator = getData2()
    generator.next().value.then(res1 => {
      generator.next(res1).value.then(res2 => {
        generator.next(res2).value.then(res3 => {
          generator.next(res3)
        })
      })
    })

    // 方案四: async/await
    async function getData3() {
      const res1 = await requestData('why3')
      console.log("第一次结果:", res1)
      const res2 = await requestData(res1 + 'kobe3')
      console.log("第二次结果:", res2)
      const res3 = await requestData(res2 + 'james3')
      console.log("第三次结果:", res3)
    }

    getData3()

  </script>
</body>

</html>